import { observer } from "mobx-react-lite"
import { Svg, Path, Rect, Mask, G, SvgProps } from "react-native-svg"
import { useGlobalStore } from "../../mobx"
import { getColorStr } from "../../themes"

export const SvgHome = observer((props: SvgProps) => {
    const { theme } = useGlobalStore()
    return (
        <Svg width="25" height="24" viewBox="0 0 25 24" fill="none" {...props}>
            <Path d="M19.0265 2H5.77352C3.90605 2 2.40002 3.48633 2.40002 5.32937V18.6706C2.40002 20.5137 3.90605 22 5.77352 22H19.0265C20.894 22 22.4 20.5137 22.4 18.6706V5.32937C22.4 3.48633 20.894 2 19.0265 2ZM4.32773 5.32937C4.32773 4.54459 4.97834 3.9025 5.77352 3.9025H11.1229L12.135 13.7717H4.32773V5.32937ZM5.77352 20.0975C4.97834 20.0975 4.32773 19.4554 4.32773 18.6706V15.7693H12.3036L12.6651 20.0975H5.77352ZM20.4723 18.6706C20.4723 19.4554 19.8217 20.0975 19.0265 20.0975H14.6892L13.7856 11.0725H20.4723V18.6706ZM20.4723 9.07491H13.6169L13.147 3.9025H19.0265C19.8217 3.9025 20.4723 4.54459 20.4723 5.32937V9.07491Z" fill={getColorStr(theme, 'color_30')}/>
        </Svg>
    )
})

export const SvgHomeAct = observer((props: SvgProps) => {
    const { theme } = useGlobalStore()
    return (
        <Svg width="25" height="24" viewBox="0 0 25 24" fill="none" {...props}>
            <Rect x="2.40002" y="2" width="20" height="20" rx="2.8" fill={getColorStr(theme, 'color_1')}/>
            <Mask id="mask0_64_1667" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20" maskType="alpha">
            <Rect x="2.40002" y="2" width="20" height="20" rx="2.8" fill={getColorStr(theme, 'color_1')}/>
            </Mask>
            <G mask="url(#mask0_64_1667)">
            <Rect x="10.7012" y="-0.776855" width="1.95924" height="26.994" transform="rotate(-5.66186 10.7012 -0.776855)" fill={getColorStr(theme, 'color_2')} />
            </G>
            <Rect width="2.00513" height="9.74915" transform="matrix(0 1 1 0 12.6509 9.07104)" fill={getColorStr(theme, 'color_2')} />
            <Rect width="2.00513" height="10.9644" transform="matrix(0 1 1 0 2.40002 13.7793)" fill={getColorStr(theme, 'color_2')} />
        </Svg>
    )
})